<template>
  <div id="eventschedule" @mouseover="showset" @mouseout="hideset" :style="{color:moddata.config.fontcolor}" class="mod">
    <div>
      <div class="con">
        <div class="title" v-show="moddata.config.titleshow">
          <span>
            <i class="iconfont icon-activity_fill"></i>&nbsp;{{moddata.config.title}}</span>
        </div>
        <div class="text">
          <div v-if="moduleDays.length<=2">
            <div class="two-days-box">
              <div class="two-datebox mr" v-for="day in moduleDays" :key="day">
                <span class="date" :class="{active:day==nowday}" @click="choseDate(day)">{{day}}</span>
              </div>
            </div>
          </div>
          <swiper :options="swiperOption" ref="mySwiper" v-if="moduleDays.length>2">
            <!-- slides -->
            <swiper-slide v-for="day in moduleDays" :key="day">
              <div class="datebox">
                <span class="date" :class="{active:day==nowday}" @click="choseDate(day)">{{day}}</span>
              </div>
            </swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-button-prev" slot="button-prev" v-show="moduleDays.length>3"></div>
            <div class="swiper-button-next" slot="button-next" v-show="moduleDays.length>3"></div>
          </swiper>
          <div class="agende_area_lis">
            <ul class="area-ul" v-if="modulePlaces.length!=1||modulePlaces[0]!='默认分会场'">
              <li v-for="pls in modulePlaces" :key="pls">
                <a href="javascript:;" :class="{active:pls==nowplaceName}" @click="chosepls(pls)">{{pls}}</a>
              </li>
            </ul>
            <div class="agende_area">
              <div class="one_agenda">
                <el-row>
                  <el-col :span="8" class="one_time" v-for="(item,index) in moduleContents" :key="index">
                    <div class="agenda_time">{{item.StartTime}} ~ {{item.EndTime}}</div>
                    <div class="agenda_info">
                      <p class="agenda_title">{{item.Title}}</p>
                      <p class="agenda_guest">
                        {{item.Content}}
                      </p>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mask" v-show="maskshow">
      <div class="settingbtn" @click="headset">
        <i class="el-icon-setting"></i> 设置</div>
      <div class="deletebtn" @click="deletemod">
        <i class="el-icon-delete"></i> 删除</div>
    </div>
  </div>
</template>

<script>
  import 'swiper/dist/css/swiper.css'
  import {
    swiper,
    swiperSlide
  } from 'vue-awesome-swiper'
  import {
    mapState
  } from 'vuex'
  import {
    MessageBox
  } from 'element-ui'
  export default {
    props: ["moddata", "index", "taskdata"],
    components: {
      swiper,
      swiperSlide
    },
    data: function () {
      return {
        maskshow: false,
        swiperOption: {
          notNextTick: true,
          setWrapperSize: true,
          slidesPerView: 3,
          navigation: {
            prevEl: '.swiper-button-prev',
            nextEl: '.swiper-button-next'
          },
          observeParents: true,
          onTransitionStart(swiper) {
            console.log(swiper)
          }
        },
        moduleContents: [],
        moduleDays: [],
        modulePlaces: [],
        nowday: "",
        nowplaceName: "",
        pending: false
      }
    },
    mounted() {
      this.getData("", "", this.parameters.taskId);
    },
    computed: {
      ...mapState([
        "parameters"
      ]),
    },
    methods: {
      showset: function () {
        this.maskshow = true;
      },
      hideset: function () {
        this.maskshow = false;
      },
      headset: function () {
        this.$store.commit({
          type: 'showsetbox',
          setMod: 'SetShowMod',
          index: this.index
        })
      },
      deletemod: function () {
        this.$store.dispatch('deleteMod', this.index)
      },
      getData(date, pls, id) {
        let that = this;
        if (!that.pending) {
          $.ajax("/Event/EventHelper/BuildAgendaModule", {
            type: "post",
            contentType: "application/json",
            headers: {
              ISGZIPDATA: "0"
            },
            data: JSON.stringify({
              taskId: id,
              day: date,
              placeName: pls
            }),
            beforeSend: function () {
              that.pending = true;
            },
            complete: function () {
              that.pending = false;
            },
            success: function (data) {
              that.moduleContents = data.agendaLst;
              that.moduleDays = data.days;
              that.modulePlaces = data.places;
              that.nowday = data.day;
              that.nowplaceName = data.place;
            },
            error: function (err) {
              console.log(err)
            }
          });
        }
      },
      choseDate(day) {
        if (this.nowday != day) {
          this.getData(day, this.nowplaceName, this.parameters.taskId)
        }
      },
      chosepls(pls) {
        if(this.nowplaceName != pls){
          this.getData(this.nowday, pls, this.parameters.taskId)
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .two-datebox {
    text-align: center;
    display: inline-block;
    margin-right: 150px;
    .date {
      display: inline-block;
      width: 172px;
      height: 46px;
      line-height: 46px;
      border-radius: 60px;
      font-size: 18px;
      border: 2px solid rgba(46, 141, 239, 0.2);
      cursor: pointer;
      color: #64a6de;
      transition: all .5s;
    }
    .active {
      background: rgba(46, 141, 239, 0.8) !important;
      color: #fff !important;
      border: 2px solid #64a6de !important;
    }
  }

  .mr:last-child {
    margin-right: 0;
  }

  .two-days-box {
    text-align: center;
  }

  .datebox {
    text-align: center;
    .date {
      display: inline-block;
      width: 172px;
      height: 46px;
      line-height: 46px;
      border-radius: 60px;
      font-size: 18px;
      border: 2px solid rgba(46, 141, 239, 0.2);
      cursor: pointer;
      color: #64a6de;
      transition: all .5s;
    }
    .active {
      background: rgba(46, 141, 239, 0.8) !important;
      color: #fff !important;
      border: 2px solid #64a6de !important;
    }
  }

  .agende_area_lis {
    transition: all .5s;
    margin-top: 40px;
  }

  .area-ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 0;
    li {
      margin-right: 18px;
      a {
        line-height: 25px;
        display: block;
        padding: 5px 13px;
        color: rgba(46, 141, 239, 1);
        border-radius: 3px;
        font-size: 14px;
        font-weight: 400;
        border: 1px solid rgba(46, 141, 239, 1);
      }
      .active {
        color: #fff !important;
        background: rgba(46, 141, 239, 1) !important;
      }
    }
    li:last-child {
      margin-right: 0;
    }
  }

  .one_agenda {
    padding-top: 14px;
    transition: all .5s;
    .one_time {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin: 25px 0;
    }
    .agenda_time {
      padding: 0 14px 0 16px;
      margin-bottom: 4px;
      font-size: 14px;
      color: rgba(46, 141, 239, 1);
    }
    .agenda_info {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      border-left: 4px solid #C8C8C8;
      padding-left: 8px;
      .agenda_title {
        color: #2d2e2e;
        letter-spacing: 1.6px;
        font-size: 14px;
      }
      .agenda_guest {
        letter-spacing: 1.4px;
        font-size: 13px;
        text-align: justify;
        color: #909090;
        line-height: 1.6;
        margin-top: 10px;
      }
    }
  }
</style>